import {Modal, Button, Form, Input, message,} from 'antd';
import React from "react";

class Xiugai extends React.Component {
    state = { visible: false };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = e => {
        this.setState({
            visible: false,
        });
        message.success("修改成功")
    };

    handleCancel = e => {
        this.setState({
            visible: false,
        });
        message.success("退出修改")
    };

    render() {
        return (
            <div >
                <Button type="primary" onClick={this.showModal}>
                    修改
                </Button>
                <Modal
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确定修改"
                >
                    <br/>
                    <Form name="control-ref" onFinish={this.onFinish}>
                        <div style={{border:"2px gray solid",width:"100%"}}></div>
                        <h1 align='center' style={{fontSize:20}}>修改信息填写</h1>
                        <Form.Item name="商品编号" label="商品编号" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name="商品名称" label="商品名称" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name="商品价格" label="商品价格" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                        <Form.Item name="商品数量" label="商品数量" rules={[{ required: true }]}>
                            <Input />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        );
    }
}
export default Xiugai